<script setup lang="ts">
interface Props {
  title: string;
  description?: string;
  imageUrl: string;
  mode?: 'image-right' | 'image-left';
}

withDefaults(defineProps<Props>(), {
  description: '',
  mode: 'image-right'
});
</script>

<template>
  <div class="info-card" :class="mode">
    <div class="content">
      <h3 class="submission-title">{{ title }}</h3>
      <p class="description">{{ description }}</p>
    </div>
    <div class="image-wrapper">
      <img :src="imageUrl" :alt="title">
    </div>
  </div>
</template>

<style scoped>
.info-card {
  display: flex;
  background: white;
  height: 480px;
  margin-bottom: 40px;
}

.content {
  flex: 2;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 40%;
}

.submission-title {
  font-size: 32px;
  color: #1a1a1a;
  margin: 0 0 24px 0;
  font-weight: 600;
  line-height: 1.4;
}

.description {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.8;
}

.image-wrapper {
  flex: 3;
  position: relative;
  max-width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
  transition: transform 0.6s ease;
  border-radius: 12px;
}

.image-wrapper:hover img {
  transform: rotate(3deg);
}

.image-left {
  flex-direction: row-reverse;
}

.image-right {
  flex-direction: row;
}

@media (max-width: 1024px) {
  .info-card {
    height: auto;
    flex-direction: column;
  }

  .content,
  .image-wrapper {
    max-width: 100%;
    padding: 40px;
  }

  .image-wrapper {
    height: 300px;
  }

  .submission-title {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .content {
    padding: 32px 24px;
  }

  .submission-title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .image-wrapper {
    height: 240px;
    padding: 24px;
  }
}
</style>
